<template>
     <!-- coderwhy老师封装的轮播图插件有点问题 -->
      <!-- <swiper>
        <template v-slot:default>
            <swiper-item v-for="(item,index) in banners" :key="index">
                <template v-slot:default>
                    <a :href="item.link">
                      <img :src="item.image" alt="">
                    </a>
                </template>
            </swiper-item>
        </template>
      </swiper> -->
      <!-- 使用vant组件库 -->
      <van-swipe :autoplay="3000" class="my-swipe" indicator-color="red">
         <van-swipe-item v-for="(item,index) in banners" :key="index">
             <a :href="item.link">
                <img :src="item.image" alt="" @load="imgUpLoad">
            </a>
        </van-swipe-item>
      </van-swipe>
</template>

<script>
// import {Swiper,SwiperItem} from 'components/common/swiper'

//按需引入轮播图组件
import Swipe from 'vant/lib/swipe'
import SwipeItem from 'vant/lib/swipe-item'
import 'vant/lib/swipe/style'
import 'vant/lib/swipe-item/style'

export default {
  name:"HomeSwiper",
  data(){
    return {
      isLoad:false
    }
  },
  components:{
    // Swiper,
    // SwiperItem
    [Swipe.name]: Swipe, //vant swipe 轮播图组件局部注册
    [SwipeItem.name]: SwipeItem
  },
  props:{
    banners:{
      type:Array,
      default(){
        return [] //对于数组，对象，函数 , 返回default函数return 值
      }
    }
  },
  methods: {
    imgUpLoad(){
      // if(!this.isLoad){
        this.$emit('swiperImageUpLoad')
        // this.isLoad = true
      // }
    }
  },
}
</script>

<style>
  .my-swipe img {
    width: 100%;
  }

  .van-swipe__indicator {
    width: 8px;
    height: 8px;
    background-color: #fff;
    opacity: 1;
  }
</style>